import { Button, Checkbox, Form, Input } from "antd";
import { $changePwd } from "../../apis/userApi";
import { useSelector } from "react-redux";

const UpPwd = function () {
  const data = useSelector((state) => state.adminSlice.admin);
  const { loginId } = data;
  let [form] = Form.useForm();
  const onFinish = (values) => {
    if (values.newPassword !== values.newPassword2) {
      alert("两次输入的新密码不一致");
      return;
    }
    values = { ...values, loginId };
    $changePwd(values).then((res) => {
      if (res.ok === 0) {
        alert("原密码输入错误");
      }
      if (res.ok === 1) {
        alert("修改密码成功");
        form.resetFields();
      }
    });
  };

  return (
    <Form
      form={form}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        maxWidth: 600,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="旧密码"
        name="password"
        rules={[
          {
            required: true,
            message: "请输入你的旧密码！",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="新密码"
        name="newPassword"
        rules={[
          {
            required: true,
            message: "请输入你的新密码!",
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        label="请再次输入新密码"
        name="newPassword2"
        rules={[
          {
            required: true,
            message: "请输入你的新密码!",
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          提交修改
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UpPwd;
